<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table,tr,td,th{
				text-align: center;
				border: 1px solid red;
				border-collapse: collapse;
				padding: 10px;
			}
			
			tr{
				height: 32px;
				
			}
			
		</style>
		
		
		
		
	</head>
	<body>
		
			
			<table class="mytab_list">
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
				<tbody>
				
				</tbody>
			 </table>
	
		
		<script type="text/javascript">
			var arr = [];
			var obj = {};
			var str = '';
			var th = document.getElementsByTagName("th");
			var tbody = document.getElementsByTagName("tbody")[0];
	
	
	
			/*for(var i = 0;i < 5;i++){
				obj = {
					id:i + 1,
					name: "kk" + i,
					age: 20,
					sex:"男",
					hobby:"学习"
				}
				arr.push(obj);
				console.log("arr:",arr)
				
				newArr = JSON.stringify(arr);
				localStorage.newArr = newArr;
				
			}
	
			newArr = JSON.stringify(arr);
			localStorage.newArr = newArr;
			showPage(arr);*/
			
			window.onload = function() {
	
				showPage(getLocalStorageData());
				
		    }
			
			function getLocalStorageData() {
				arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
				return arr;
			}
			
			
			
			function showPage(arr) {
				str = "";
				
				for(var i =  0;i <arr.length; i++) {
					str +=`
					<tr>
							<td>${i + 1}</td>
							<td>${arr[i].name}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex}</td>
							<td>${arr[i].hobby}</td>
							<td>
								<input class="up" type="button" value="上移" onclick="up(${arr[i].id})"/>
								<input class="del" type="button" value="删除" onclick="del(${arr[i].id})"/>
								<input class="down" type="button" value="下移" onclick="down(${arr[i].id})"/>
							</td>
						</tr>		
					`
				}
				tbody.innerHTML = str;
			}
			 console.log("str:",str);
			 
			 
			 var upbtn = document.querySelectorAll(".up");
			 var delbtn = document.querySelectorAll(".del");
			 var downbtn = document.querySelectorAll(".down");
			 var arrUp = [];
			 
			 upbtn[0].disabled = true;
			 
			 function up(id) {
			 	for(var i =1;i< arr.length;i++){
			 		if(id == arr[i].id){
			 			arrUp = arr[i];
			 			arr[i] = arr[i - 1];
			 			arr[i - 1] = arrUp;
			 			var item;
			 			for(var a = 0; a <=arr.length;a++) {
			 				for(var b = a + 1;b < arr.length; b++) {
			 					if(arr[a].id > arr[b].id) {
			 						item = arr[a].id;
			 						arr[a].id = arr[b].id;
			 						arr[b].id = item;
			 					}
			 				}
			 			}
			 			newArr = JSON.stringify(arr);
			 			localStorage.newArr = newArr;
			 			showPage(arr);
			 		}
			 	}
			 }
			 
			 
			 function del(id) {
			 	for(var i=0; i< arr.length;i++) {
			 		if(id = arr[i].id) {
			 			arr.splice(i,1);
			 			showPage(arr);
			 		}
			 	}
			 }
			 
			 
			 downbtn[downbtn.length - 1].disabled = true;
			 
			 var arrDown = [];
			 
			 function down(id) {
			 	for(var i = 0;i <arr.length - 1;i++) {
			 		if(id == arr[i].id){
			 			arrDown = arr[i];
			 			arr[i] = arr[i + 1];
			 			arr[i + 1] = arrDown;
			 			var itemr;
			 			for(var a = 0 ;a< arr.length;a++) {
			 				for (var b = a + 1;b<arr.length;b++) {
			 					if(arr[a].id > arr[b].id) {
			 						itemr = arr[a].id;
			 						arr[a].id = arr[b].id;
			 						arr[b].id =itemr;
			 					}
			 				}
			 			}
			 			
			 			newArr = JSON.stringify(arr);
			 			localStorage.newArr = newArr;
			 			showPage(arr);
			 			
			 		}
			 	}
			 }
			 
		</script>
		
		
		<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
